<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/static/plugin/jo/joUI.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/static/plugin/layui-2.4.3/css/layui.css" rel="stylesheet"/>
    <!--ztree-->
    <link href="/static/plugin/zTree/css/metroStyle/metroStyle.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>
    <link href="/static/css/fs/fileView.css" rel="stylesheet">

    <title>历史日志</title>
</head>
<body class="skin-default">

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">

            <div class="container-fluid card">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="fs-nav">
                            <!--<a class="fs-path" onclick="location.reload();">根目录</a>-->
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12" id="contentBox">
                        <table class="table table-hover " id="fsList" dataUrl=""
                               deleteUrl="" formUrl="" trClick="fileInfoClick">
                            <col field="[=getIcon('{folder}')]" title="" width="30px" align="left" headAlign="left"/>
                            <col field="name" title="名称" width="50%" align="left" headAlign="left" order="name"/>
                            <col field="[=jo.formatTime('{updateTime}')]" title="修改日期" width="20%" align="left" headAlign="left" order="updateTime"/>
                            <col field="folder" title="文件夹" width="15%" align="left" headAlign="left"/>
                            <col field="[=calcSize({size})]" title="大小" width="10%" align="right" headAlign="right" order="size"/>
                            <col field="[=getOper('{addr}',{folder})]" title="" width="70px" align=""/>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!--日志弹窗-->
<script type="template" id="logWin">
    <div style="word-break: break-all;line-height: 1.7;overflow: hidden;position: relative;width: 100%;height: 100%;">
        <div style="height:100%;overflow: hidden;padding: 15px 15px 45px 15px;">
            <div id="logConsole" style="height: 100%;overflow: auto;border: #cccccc solid 1px;">

            </div>
        </div>
        <div class="row" style="position: absolute;bottom: 0px;left: 0px;padding: 5px 15px;width: 100%;">
            <div class="col-sm-6" style="padding: 0px;">
                <input type="text" id="keyword" oninput="keywordInput()" class="form-control " placeholder="输入关键字进行过滤" />
            </div>
            <div class="col-sm-6" style="padding: 0px;line-height: 34px;">
                <span style="padding-left: 25px;">
                    编码：
                    <label style="margin: 0px;"><input type="radio" name="charset" value="UTF-8" class=""> UTF-8</label>
                    <label style="margin: 0px;"><input type="radio" name="charset" value="GBK" class=""> GBK</label>
                    <label style="margin: 0px;"><input type="radio" name="charset" value="ISO-8859-1" class="" checked> ISO-8859-1</label>
                </span>
                <span style="padding-left: 25px;">
                    坐标：<span id="sizeShow"></span>
                </span>
            </div>
        </div>
        <div style="clear: both;"></div>
    </div>
</script>


<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--bootstrap-->
<script src="/static/plugin/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--layui-->
<script src="/static/plugin/layui-2.4.3/layui.all.js"></script>
<!--ztree-->
<script src="/static/plugin/zTree/js/jquery.ztree.all.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<style>
    .log-item{
        padding: 0px 5px 2px 5px;
    }
    .log-item:hover{
        background-color: #F3F7F9;
    }
</style>
<script type="text/javascript">
    //页面对象,用于记录页面包含元素信息
    var fileView = {
        disks : []
        ,grid : null
        ,diskGroup : []
    };
    $(function () {
        fileView.grid = Grid('fsList');
        folderClick('', '根目录');
    });

    //文件夹点击
    function folderClick(id, name){
        jo.postAjax("/log/client/logFiles", {folder:id}, function(json){
            if(json && json.code == "0"){
                fileView.grid.loadData(json.data);
            }else if(json){
                jo.showErrorMsg(json.info);
            }else{
                jo.showErrorMsg("操作失败");
            }
        }, true);
        appendPath(id, name);
    }
    //追加地址栏信息
    function appendPath(id, name){
        $(".fs-nav").append('<a class="fs-path" onclick="pathClick(this, \''+id+'\')">'+name+'</a>');
    }
    //地址栏点击
    function pathClick(obj, id){
        var afterEle = $(obj).nextAll();
        if(afterEle && afterEle.length > 0){
            //将被点击对象后面的路径全部移除
            for(var i=0;i<afterEle.length;i++){
                $(afterEle[i]).remove();
            }
        }
        //加载被点击地址下的文件信息
        jo.postAjax("/log/client/logFiles", {folder:id}, function(json){
            if(json && json.code == "0"){
                fileView.grid.loadData(json.data);
            }else if(json){
                jo.showErrorMsg(json.info);
            }else{
                jo.showErrorMsg("操作失败");
            }
        }, true);
    }
    //文件列表点击事件
    function fileInfoClick(oItem, oList, index){
        if(oItem.folder){//文件夹点击
            folderClick(oItem.addr, oItem.name);
        }else{//文件点击

        }
    }
    function getIcon(type){
        var icon = "";
        if(type == "true"){
            icon = '<span class="fs-icon fs-icon-folder"></span>';
        }else{
            icon = '<span class="fs-icon fs-icon-txt"></span>';
        }
        return icon;
    }
    function getOper(id, folder){
        var opt = '';
        if(!folder){
            opt += '&nbsp;&nbsp;&nbsp;<a onclick="downloadLogFile(\''+id+'\')" style="cursor:pointer;" title="下载"><i class="fa fa-download font-size-14" aria-hidden="true"></i></a>';
            opt += '&nbsp;&nbsp;&nbsp;<a onclick="lookLog(\''+id+'\')" style="cursor:pointer;" title="查看日志"><i class="fa fa-file-text-o font-size-14" aria-hidden="true"></i></a>';
        }
        return opt;

    }
    function calcSize(size){
        if(size > (1024 * 1024)){
            return parseInt(size/1024/1024) + 'MB';
        }else if(size > 1024){
            return parseInt(size/1024) + 'KB';
        }else if(size > 0){
            return size + 'B';
        }else{
            return '--';
        }
    }
    var curAddr = '';//当前查看的日志
    var logArr = [];//日志数组
    var readFlag = true;//开关
    var startPointer = 0;//开始位置
    var endPointer = 0;//结束位置
    var size = 0;//日志大小
    //查看日志
    function lookLog(addr){
        if(!addr){
            return;
        }
        curAddr = addr;
        jo.showDialog($('#logWin').html(), 'logConsole', true, {
            title : curAddr
            ,area : ['70%','70%']
            ,btn : ['首页', '上一页', '下一页', '尾页', '关闭']
            ,success : function(){
                searchLog();
            }
            ,btn1 : function(){
                searchLog(0);
                return false;
            }
            ,btn2 : function(){//上一页
                searchLog(startPointer, false);
                return false;
            }
            ,btn3 : function(){//下一页
                searchLog(endPointer);
                return false;
            }
            ,btn4 : function(){//尾页
                searchLog(size, false);
                return false;
            }
        });
    }
    //查询日志
    function searchLog(poniter, nextFlag){
        if(!curAddr){
            return;
        }
        if(typeof(nextFlag) != 'boolean' ){
            nextFlag = true;
        }

        jo.postAjax(contextPath + 'log/client/readLog', {path: curAddr, pointer : jo.getDefVal(poniter, 0), isNext : nextFlag, charset:jo.getCheckBoxValue('charset')}, function(json){
            if(json && json.code == 0 && json.data && json.data[0]){
                var log = json.data[0];//日志
                if(log && log.logList && log.logList.length > 0){
                    clearLog();//先清空
                    for(var i=0;i<log.logList.length;i++){
                        var item = log.logList[i];
                        item = item.replace(/</ig, '&lt;');//转义html关键符号
                        item = item.replace(/>/ig, '&gt;');//转义html关键符号
                        var len = logArr.push(item);//记录下来
                        var logShow = formatLog(item);//展示的日志
                        $("#logConsole").append('<p class="log-item" index="'+(len-1)+'">'+logShow+'</p>');
                    }
                    startPointer = log.startPointer;//开始
                    endPointer = log.endPointer;//结束
                    size = log.size;//大小
                    $('#sizeShow').html(startPointer + ' ~ ' + endPointer + ' / ' + size);

                }
            }else if(json){
                jo.showErrorMsg(json.info);
            }
        }, true);
    }
    //关键字过滤
    function keywordInput(){
        var key = $('#keyword').val();//关键字
        var i = 0;
        $('.log-item').each(function(idx, ele){
            var log = logArr[parseInt($(this).attr('index'))];//日志原始内容
            if(key && log && log.indexOf(key) > -1){//存在关键字
                log = log.replace(new RegExp(key, "ig"), '<span class="font-red" style="font-weight: 700;">'+key+'</span>');//转义html关键符号
                $(this).html(log);
                $(this).show();
                i++;
            }else if(!key){//关键字为空则全部显示
                $(this).html(log);
                $(this).show();
                i++;
            }else{
                $(this).hide();
            }
        });
        //$('#match').html(i);//匹配数
    }
    //格式化日志
    function formatLog(log){
        var key = $('#keyword').val();//关键字
        if(key && log && log.indexOf(key) > -1){
            return log.replace(new RegExp(key, "ig"), '<span class="font-red" style="font-weight: 700;">'+key+'</span>');//转义html关键符号
        }else if(!key){//关键字为空则全部显示
            return log;
        }else{
            return "";
        }
    }
    //清空
    function clearLog(){
        logArr = [];//清空日志数组
        $("#logConsole").html('');//清空控制台
    }
    //下载
    function downloadLogFile(path){
        if(jo.isValid(path)){
            jo.confirm("您确定要下载该文件吗?", {title:"下载确认"}, function(idx){
                jo.post(contextPath + "log/client/download", {"path" : path});
                jo.close(idx);
            });
        }else{
            console.error("文件编号无效,无法下载!");
        }
    }
</script>

</body>
</html>
